import { Meta } from '@storybook/blocks';

<Meta title="Design System/Z-index" />

# Z-index

Z-index values define a set of variables to set z-order of elements.

| Variable | Value | Description |
|----|:----:|----|
| `--bl-index-deep` | -1 | Deep z-index can be used to move an element behind everyting else |
| `--bl-index-base` | 1 | Base z-index for just leveling up an element in z-stack |
| `--bl-index-popover` | 100 | Z-index value for popover items |
| `--bl-index-tooltip` | 200 | Tooltip-like elements can be used on top of popovers |
| `--bl-index-sticky` | 300 | Z-index for sticky elements |
| `--bl-index-overlay` | 400 | Z-index for overlay elements like backdrops |
| `--bl-index-dialog` | 500 | Z-index for dialog and modals |
| `--bl-index-notification` | 600 | Top z-index for showing toast or notification elements |
